<!--
 * @Author: Bennent_G
 * @Date: 2024-12-25 12:27:32
 * @LastEditTime: 2025-03-27 12:16:46
 * @Description:
-->

<template>
	<div>
		<el-dialog v-model="locaVisible" v-bind="$attrs" width="800px">
			<template #footer>
				<el-button @click="close">取消</el-button>
				<el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
			</template>
			<el-form ref="formRef" :model="form">
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item
							label="用户昵称"
							prop="nickName"
							:label-width="'120px'"
							:rules="[{ required: true, message: '请输入昵称!' }]"
						>
							<el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户性别" prop="sex" :label-width="'120px'">
							<el-radio-group v-model="form.sex">
								<el-radio :label="1">男</el-radio>
								<el-radio :label="0">女</el-radio>
								<el-radio :label="2">保密</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item
							label="手机号"
							prop="mobile"
							:label-width="'120px'"
							:rules="[{ required: true, message: '请输入手机号!' }]"
						>
							<el-input v-model="form.mobile" placeholder="请输入手机号"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户状态" prop="status" :label-width="'120px'">
							<el-radio-group v-model="form.status">
								<el-radio :label="1">正常</el-radio>
								<el-radio :label="0">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="用户头像" :label-width="'120px'">
							<el-upload
								:limit="1"
								:show-file-list="true"
								accept="image/*"
								list-type="picture-card"
								class="avatar-uploader"
								:before-upload="beforeUpload"
								:on-change="handleChange"
							>
								<el-icon><Plus /></el-icon>
								<div style="margin-top: 8px">上传</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive, watchEffect } from 'vue';
import type { AnyObject } from '@/views/global';
import type { UploadProps, UploadUserFile } from 'element-plus'
import useNotificationHook from '@/hooks/common/useNotificationHook';

defineComponent({ name: 'UserFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	id: {
		type: [Number, String],
		default: 0,
	},
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get: () => props.modelValue,
	set: (val) => emits('update:modelValue', val),
});

const { openNotifation } = useNotificationHook();

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<AnyObject>({
	nickName: '',
	sex: 0,
	mobile: '',
	status: 1,
	avatar: '',
});
const handleSubmit = () => {
	loading.value = true;
	formRef.value.validate((valid) => {
		if (valid) {
			console.log('submit!');
			// #TODO: 提交表单
			openNotifation({ type: 'success', message: '提交成功' });
			close();
		}
		loading.value = false;
		reset();
	});
};
const reset = () => {
	formRef.value.resetFields();
};
// 获取用户信息
const getUserInfo = () => {
	// #TODO: 获取用户信息
	// #TODO: 获取用户信息成功后同步表单
	if (!props.id) return;
	console.log('getUserInfo', props.id);
};
watchEffect(() => {
	getUserInfo();
});

// 上传图片
const beforeUpload = () => {
	return false;
};
const handleChange: UploadProps['onChange'] = (uploadFile, uploadFiles) => {
	console.log(uploadFile, uploadFiles);
};

// 关闭弹框
const close = () => {
	locaVisible.value = false;
	reset();
};
</script>

<style scoped lang="scss">

.el-input-number {
	width: 100%;
}
</style>
